<template>
  <app-dialog v-model="show" width="600px" :title="parentdata.label" @open="handleOpen">
    <div class="addip_form">
      <el-form :model="formdata" label-width="150px" ref="formRef" :rules="rules">
        <el-form-item label="IP地址" prop="ip">
          <el-input v-model="formdata.ip" style="width: 300px" />
        </el-form-item>
        <el-form-item label="过期时间" prop="expire_time">
          <el-date-picker
            v-model="formdata.expire_time"
            type="datetime"
            placeholder="过期时间"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="状态" v-if="parentdata.value == 'update'">
          <el-select v-model="formdata.status" style="width: 300px">
            <el-option label="未使用" :value="0" />
            <el-option label="使用中" :value="1" />
            <el-option label="已过期" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formdata.remark"
            style="width: 300px"
            :rows="4"
            type="textarea"
            placeholder="备注"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="show = false" style="border-radius: 0;">取消</el-button>
      <el-button type="primary" class="hovepcvicecolor" @click="handleSubmit" style="border-radius: 0;">确定</el-button>
    </template>
  </app-dialog>
</template>

<script setup>
import { reactive } from 'vue'
import { http } from '@/utils/http'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const props = defineProps({
  parentdata: Object,
})
const formRef = ref(null)
const formdata = ref({
  ip: '',
  expire_time: '',
  remark: '',
  status: 1,
})

const rules = reactive({
  ip: [{ required: true, message: '请输入ip', trigger: 'blur' }],
  expire_time: [{ required: true, message: '请选择过期时间', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
})

const handleOpen = () => {
  if (props.parentdata.value == 'update') {
    formdata.value = {
      ip: props.parentdata.data.ip,
      id: props.parentdata.data.id,
      expire_time: props.parentdata.data.expire_time,
      remark: props.parentdata.data.remark,
      status: props.parentdata.data.status,
    }
  } else {
    formdata.value = {
      ip: '',
      expire_time: '',
      remark: '',
      status: 1,
    }
  }
}

const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    let body
    let url = ''
    if (props.parentdata.value == 'update') {
      url = '/read_list/proxyip_update'
      body = JSON.parse(JSON.stringify(formdata.value))
    } else {
      url = '/read_list/proxyip_create'
      body = [JSON.parse(JSON.stringify(formdata.value))]
    }
    http.post(url, body).then(res => {
      show.value = false
      emits('change')
    })
  })
}
</script>

<style lang="scss" scoped>
</style>